<script setup>
import { Back } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

import { useDict } from '@/hooks/useDict'
import { useTableList } from '@/hooks/useTableList'
import {
  fetchFaceList,
  deleteFace,
} from '@/api/manager/dataManage/deviceManage.js'
import PersonAdd from './personAdd.vue'
import PersonDetail from './personDetail.vue'

defineOptions({
  name: 'PersonList',
})

const props = defineProps({
  gateId: {
    type: String,
    required: true,
  },
  currentType: {
    type: String,
    default: '',
  },
  parkList: {
    type: Array,
    default: [],
  },
})

const emit = defineEmits(['back'])

const { dict } = useDict(['gender'])

const searchParams = ref({
  pedestrianGateId: '',
  // licensePlate: '',
  // cardNo: '',
  // type: '',
})

const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, fetchFaceList, deleteFace, 'personFace')

const handleBack = () => {
  emit('back')
}

const handleDeletePerson = (data) => {
  ElMessageBox.confirm('是否确定删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = {
        pedestrianIds: [props.gateId],
        employeeNo: data.employeeNo,
      }
      const res = await deleteFace(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const handleAddDialogClose = (shouldRefresh) => {
  handleClose(shouldRefresh)
}

onMounted(() => {
  searchParams.value.pedestrianGateId = props.gateId
  initTableList(1)
})
</script>

<template>
  <div class="search search1" :class="{ active: toggleSearchStatus }">
    <div class="search-left" ref="searchFromRef">
      <!-- <el-form class="search-form" inline>
        <el-form-item label="车牌号码">
          <el-input
            class="search-input"
            v-model="searchParams.licensePlate"
            placeholder="请输入车牌号码"
            :suffix-icon="Search"
          />
        </el-form-item>
        <el-form-item label="卡号">
          <el-input
            class="search-input"
            v-model="searchParams.cardNo"
            placeholder="请输入卡号"
            :suffix-icon="Search"
          />
        </el-form-item>
        <el-form-item label="名单属性">
          <el-select
            class="search-select"
            v-model="searchParams.type"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item of dict['car_plate_property']"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form> -->
      <a
        class="search-left-toggle"
        v-if="showToggle"
        @click="handleToggleSearch"
      >
        <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
        {{ toggleSearchStatus ? '收起' : '展开' }}
      </a>
    </div>
    <div class="search-right">
      <el-button type="primary" @click="initTableList(1)"
        ><svg-icon name="search" size="14px" />搜索</el-button
      >
      <el-button @click="handleReset(null, ['pedestrianGateId'])"
        ><svg-icon name="reset" size="17px" />重置</el-button
      >
    </div>
  </div>
  <div class="content">
    <div class="content-operate" style="justify-content: flex-start">
      <el-button type="primary" @click="handleBack">
        <el-icon><Back /></el-icon>
        返回
      </el-button>
      <el-button type="primary" @click="handleAdd('新增人员')">
        <svg-icon name="add" size="15px" />
        新增人员
      </el-button>
    </div>

    <div class="content-table">
      <el-table
        class="custom-table"
        :data="tableData"
        show-overflow-tooltip
        :tooltip-options="{ showAfter: 300 }"
      >
        <el-table-column type="index" label="序号" width="60px" />
        <el-table-column prop="employeeNo" label="工号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="gender" label="性别">
          <template #default="scope">
            <span>{{
              dict['gender'].find((item) => item.value === scope.row.gender)
                ?.name || ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="floorNumber" label="层号" />
        <el-table-column prop="roomNumber" label="房间号" />
        <el-table-column prop="createTime" label="开始时间">
          <template #default="scope">
            <span>{{
              scope.row.Valid?.beginTime
                ? scope.row.Valid.beginTime.replace('T', ' ')
                : ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="effectiveTime" label="结束时间">
          <template #default="scope">
            <span>{{
              scope.row.Valid?.endTime
                ? scope.row.Valid.endTime.replace('T', ' ')
                : ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="160px">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleEdit(scope.row, '编辑人员')"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              @click="handleDetail(scope.row, '详情')"
              >详情</el-button
            >
            <el-button link type="danger" @click="handleDeletePerson(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="content-page">
      <el-pagination
        class="custom-pagination"
        :current-page="paginationParams.pageIndex"
        :page-size="paginationParams.pageSize"
        background
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="initTableList"
      />
    </div>
  </div>

  <PersonAdd
    ref="addRef"
    :gate-id="gateId"
    :detail="currentDetail"
    :park-list="parkList"
    @close="handleAddDialogClose"
  />
  <PersonDetail ref="detailRef" :detail="currentDetail" :park-list="parkList" />
</template>
